<html>

<head>
	<style>
		* {
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		
		body {
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-family: Arial;
			font-size: 16px;
		}
		
		#page {
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}
		
		#loading {
			position: relative;
			text-align: center;
			margin-top: 3px;
			background: #ffffff;
			opacity: 0.8;
			padding: 3px;
			width: 35%;
			height: 24px;
			border: 1px solid silver;
			margin-left: auto;
			margin-right: auto;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			z-index: 200;
		}
		
		#loading-container {
			position: absolute;
			top: 0px;
			left: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			border: 0px solid black;
			background-color: white;
			z-index: 100;
		}
		
		#files {
			width: 100%;
			text-align: center;
		}
		
		button {
			text-align: center;
			background: #ffffff;
			padding: 3px;
			margin: 3px;
			border: 1px solid black;
			height: 32px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
		}
		
		button.info {
			background: #ffaaaa;
			width: 30%;
		}
		
		button.file {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}
		
		#logo {
			border: 0px solid black;
		}
	</style>
	<script>
		function send(receiver, message) {
			if (typeof(Pd) != "undefined") {
				Pd.send(receiver, message);
			} else {
				console.log(receiver + ": " + message);
			}
		}
		
		function sendBang(receiver) {
			if (typeof(Pd) != "undefined") {
				Pd.sendBang(receiver);
			} else {
				console.log(receiver + ": bang");
			}
		}
		
		function launch() {
			Pd.requestfiles();
		}
		
		function files(myfiles) {
			var filelist = document.getElementById("files");
			for (a=0; a<myfiles.length - 1; a++) {
				var bits = myfiles[a].split("/");
				var filename = bits[bits.length - 1];
				filelist.innerHTML += "<p><button class='file' onclick='Pd.load(\"" + myfiles[a] + "\");'>" + filename + "</button></p>";
			}
			document.getElementById('loading-container').style.visibility = "hidden";
			document.getElementById('loading').style.visibility = "hidden";
		}
	</script>
</head>

<body onLoad='launch();' onResize='launch();'>
	<div id="page">
		<div id='loading-container'></div>
		<div id='loading'>Loading...</div>
		<div id='files'>
			<p><strong>Projects:</strong></p>
		</div>
	</div>
</body>

</html>
